<template>
  <div v-if="this.studentId != null">
    <el-row>
      <el-col :span="24">
        <h1 style="text-align: center">规划管理</h1>
      </el-col>
    </el-row>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
      label-position="top"
      style="margin: 20px"
    >
      <el-form-item label="大一阶段规划" prop="freshman">
        <el-input
          v-model="formData.freshman"
          type="textarea"
          placeholder="大学一年级阶段规划"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="大二阶段规划" prop="sophomore">
        <el-input
          v-model="formData.sophomore"
          type="textarea"
          placeholder="大学二年级阶段规划"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="大三阶段规划" prop="junior">
        <el-input
          v-model="formData.junior"
          type="textarea"
          placeholder="大学三年级阶段规划"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="大四阶段规划" prop="senior">
        <el-input
          v-model="formData.senior"
          type="textarea"
          placeholder="大学四年级阶段规划"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="就业规划" prop="employment">
        <el-input
          v-model="formData.employment"
          type="textarea"
          placeholder="学业完成后你想找到一份什么样的工作？如何去寻找工作？"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="创业规划" prop="entrepreneurial">
        <el-input
          v-model="formData.entrepreneurial"
          type="textarea"
          placeholder="你考虑过自己吗？创业创业规划"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="事业规划" prop="cause">
        <el-input
          v-model="formData.cause"
          type="textarea"
          placeholder="你希望自己人生达到什么样的目标？事业规划"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item size="large" style="display: flex; justify-content: center">
        <el-button-group>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>
  <main v-else>
    <el-empty
      description="不好意思,这是学生编辑页面,由于您不是学生,所以不对您展示"
    ></el-empty>
  </main>
</template>
<script>
import { mapGetters } from "vuex";
import { getPlan } from "@/api/personal/personal.js";
export default {
  components: {},
  props: [],
  data() {
    return {
      // studentId: null,
      formData: {
        freshman: undefined,
        sophomore: undefined,
        junior: undefined,
        senior: undefined,
        employment: undefined,
        entrepreneurial: undefined,
        cause: undefined,
      },
      rules: {
        freshman: [
          {
            required: true,
            message: "大学一年级阶段规划",
            trigger: "blur",
          },
        ],
        sophomore: [
          {
            required: true,
            message: "大学二年级阶段规划",
            trigger: "blur",
          },
        ],
        junior: [
          {
            required: true,
            message: "大学三年级阶段规划",
            trigger: "blur",
          },
        ],
        senior: [
          {
            required: true,
            message: "大学四年级阶段规划",
            trigger: "blur",
          },
        ],
        employment: [
          {
            required: true,
            message: "学业完成后你想找到一份什么样的工作？如何去寻找工作？",
            trigger: "blur",
          },
        ],
        entrepreneurial: [
          {
            required: true,
            message: "你考虑过自己吗？创业创业规划",
            trigger: "blur",
          },
        ],
        cause: [
          {
            required: true,
            message: "你希望自己人生达到什么样的目标？事业规划",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["id", "studentId"]),
  },
  watch: {},
  created() {},
  async mounted() {
    const { data } = await getPlan(this.id);
    console.log(this.studentId);
    if (data == null) {
      return;
    }
    this.studentId = data.studentId;
  },
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style></style>
